<template>
	<div style="width:100%;height: 100%;background: #fff;">
		<div class="registrationForm">
			<x-header
				header-background-color="#fff"
				:left-options="{showBack: true,preventGoBack:true}"
				@on-click-back="GoBack"
			>
				
				增援需求
				<!-- <a slot="right">Feedback</a> -->
			</x-header>
			<div class="registrationForm_content">
				<div class="registrationForm_content_form">
					<el-form 
					:model="ruleForm" 
					:rules="rules" 
					ref="ruleForm" 
					label-position="left" 
					label-width="90px" 
					hide-required-asterisk
					class="registrationForm_ruleForm needResurce_form element_formCommons"
					>
						<el-form-item label="提报人">
							<el-input readonly v-model="ruleForm.leadername" placeholder="请输入带队人员姓名"></el-input>
						</el-form-item>
						<el-form-item label="联系电话" prop="conacttel">
							<el-input type="number" v-model="ruleForm.conacttel" placeholder="请输入联系电话"></el-input>
						</el-form-item>
						<el-form-item label="提报时间">
							<el-input readonly v-model="ruleForm.fillTime" placeholder="请输入联系电话"></el-input>
						</el-form-item>
						<el-form-item label="需增援" prop="demandnum">
							<el-input type="number" v-model.number="ruleForm.demandnum" placeholder="请输入需增援人数">
								<template slot="append">人</template>
							</el-input>
						</el-form-item>
						<el-form-item label="队伍地址" class="teamAddress">
							<!-- <el-input v-model="ruleForm.teamAddress" placeholder="队伍地址"></el-input> -->
							<div>
								{{ruleForm.teamAddress}}
							</div>
							<div @click="manualLocation">
								<img src="../../assets/images/icon/locationWhite.png" alt="">
								手动定位
							</div>
						</el-form-item>
						<el-form-item label="" class="addedCont">
							<el-input
								type="textarea"
								placeholder="请输入备注信息"
								v-model="ruleForm.added"
								maxlength="200"
								show-word-limit
								>
							</el-input>
							<img @click="yySet" style="position: absolute;right: 0px;bottom: -.65rem;height: 0.65rem;width: 0.67rem;border-radius: 5px;" src="../../assets/images/yuyin.png" alt="">
						</el-form-item>
						<div class="fileLists">
							<fileObj :typeflag="1" ref="fileObj"  @fliws="getFiles" @uplist="muplist" />
							<div class="fileLists_select">
								<div @click="openSelect('menu1')">
									<img src="../../assets/images/icon/back_picture.png" alt="" srcset="">
									<span>照片</span>
								</div>
								<div @click="openSelect('menu2')">
									<img src="../../assets/images/icon/back_vedio.png" alt="" srcset="">
									<span>视频</span>
								</div>
								<div @click="openSelect('menu3')">
									<img src="../../assets/images/icon/audioselect.png" alt="" srcset="">
									<span>音频</span>
								</div>
							</div>
						</div>
					</el-form>
				</div>
				<div class="submit" @click="submitForm('ruleForm')">保存</div>
			</div>   
		</div>
		<popup v-if="commonMapModel" v-model="commonMapModel" height="100%" width="100%" position="right">
			<commonMap ref="CMap" bigHeight="90vh" :Enable="true" initName="relocation" @handle="mapHandle" />
		</popup>
	</div>
</template>
 
<script>
import { XHeader, Previewer, PopupPicker, Datetime, Popup } from "vux";
import { getDataZW, getDataMaterial, demandpresentationSave } from "@/assets/js/service";
import { validatePhone } from '@/utils/validate';
import commonMap from "../commons/commonMap";
import fileObj from "../commons/testcorpper";


export default {
  props: ["refid"],
  components: {
    XHeader,
	Previewer,
	PopupPicker,
	Datetime,
	Popup,
	commonMap,
	fileObj
  },
  data() {
    return {
		commonMapModel:false,//手动定位
		lontatStr:"",//保留android赋值的坐标

		ruleForm: {
			leadername: "", //提报人
			conacttel:"",//联系电话
			fillTime:"",//提报时间
			feedbacklon:"",//队伍地址(经度)
			feedbacklat:"",//队伍地址(纬度)
			teamAddress:"",//队伍地址
			added:"",//补充说明
			demandnum:"",//需增援人数
		},
		rules: {
			conacttel: [
				{ required: true, message: "请输入联系电话", trigger: ['change','blur'] },
				{ validator:validatePhone, trigger:['change','blur']}
			],
			demandnum: [
				{ required: true, message: "请输入需增援人数", trigger: ['change','blur'] },
      			{ type: 'number', message: '增援人数必须为数字值'}
			],
		},
        
        information:"",

		fileList:[],
      	paramObj:{},
		attatchids:""
		
    };
  },
  created() {
	this.ruleForm.fillTime=this.$formatTimeStr();
    this.ruleForm.leadername=this.$store.state.user.username;
  },
  methods: {
	// 附件
    openSelect(_type){//底部照片等按钮
      	this.$refs.fileObj.clickMenu(_type);
    },
    getFiles(data){
      	this.fileList=data;
    },
    muplist(data){
      	console.log("调用成功===>muplist")
		this.paramObj=data;
      	console.log(JSON.stringify(data))
      	console.log("显示成功===>muplist")
	},
	// 附件end
    yySet() {//打开语音识别功能
		if (this.$isAndroid()) {
			window.android.openVoice();
		} else {
			console.log("打开语音识别功能");
		}
    },
    setContent(_text) {//安卓语音返回调用
		let _this = this;
		if (_text) {
			_this.ruleForm.added += _text;
		}
	},
    manualLocation(){//进入手动定位页面
		let _this=this;
		_this.commonMapModel=true;
		setTimeout(()=>{
			_this.$refs.CMap.locationSet(_this.lontatStr);
		},1000)
    },
    mapHandle(_obj){//手动定位返回值
		console.log(_obj)
		if(_obj.opentype&&_obj.opentype=='locationSure'){
			this.locationSet(_obj.locationStr);
		}
		this.commonMapModel=false;
    },
	refreshLocation(){//初始化定位
		if(this.$isAndroid()){
			console.log("invoking android!")
			window.android.getCurrentLocation();
		}else{
			this.locationSet("93.793409_31.896125_四川省雅安市拉亚镇桑木卡")
		}
	},
    locationSet(lontatStr){//地址
      	this.lontatStr=lontatStr;
		this.ruleForm.feedbacklon=lontatStr.split("_")[0];
		this.ruleForm.feedbacklat=lontatStr.split("_")[1];
		this.ruleForm.teamAddress=lontatStr.split("_")[2];   
	},
    GoBack() {
		this.$closeStates();
      	if(this.$refs.fileObj.GetAriaHidden()){
			this.$emit("close")
		}else{
			this.$refs.fileObj.closePreview();
		}

	},
    submitForm(formName) {//校验
		this.$refs[formName].validate((valid,obj) => {
			if (valid) {
				console.log(this.ruleForm);
				this.submitBtn();
			} else {
				this.$showBottomToast(obj[Object.keys(obj)[0]][0].message)
				console.log(obj[Object.keys(obj)[0]][0].message);
				return false;
			}
		});
	},
    submitBtn(){//有附件就先调用安卓没附件就直接请求
		let _this=this;
		_this.$vux.loading.show({
			text: '上传中'
		})
        try{
			if(!_this.paramObj.uplist&&!_this.paramObj.upvideolist){
				_this.submitSave();
			}else{
				console.log(_this.paramObj.uplist.join(','))
				console.log(_this.paramObj.upvideolist.join(','))
				window.android.uploadFiles(_this.paramObj.uplist.join(',')+"",_this.paramObj.upvideolist.join(',')+"","mobile/saveattach.mvc");
				console.log("调用uploadFiles 成功")
			}
        }catch(e){
			console.log(e)
			console.log("调用uploadFiles 失败")
			_this.$vux.loading.hide();
			//TODO handle the exception
        }
     

    },
    uploadFeild(){//上传附件失败
		let _this=this;
		_this.$vux.toast.show({
			text: "上传附件失败",
			type: "cancel"
		});
		_this.$vux.loading.hide();
	},
    fileSuccessCommit(_resultObj){//安卓附件上传成功后的回调
		console.log("fileSuccessCommit==>"+JSON.stringify(_resultObj))
		this.$vux.loading.hide()
		console.log("resultObj==>"+_resultObj)
		this.attatchids=_resultObj.fileid;
		this.submitSave();
    },
	submitSave() {//保存接口请求
		let _this = this;
		_this.$vux.loading.show({
			text: "Loading"
		});
		
		// 拼写需求信息格式
        _this.information="需增援"+_this.ruleForm.demandnum+"人";
		// 拼写需求信息格式end
		let param = {
			userid: _this.$store.state.user.userid,
			orgcode: _this.$store.state.user.orgcode,
			eventid: _this.$store.state.eventId,
            information:_this.information,
			telephone: _this.ruleForm.conacttel,//联系电话
			committime: _this.ruleForm.fillTime,//提报时间
			attatchids:_this.attatchids,//附件
			demandflag:'1',//0是物资需求1是增援需求
			notes:_this.ruleForm.added,//补充说明
			longitude: _this.ruleForm.feedbacklon,//队伍地址(经度)
			latitude: _this.ruleForm.feedbacklat,//队伍地址(纬度)
			address: _this.ruleForm.teamAddress,//队伍地址
			demandnum: JSON.stringify(_this.ruleForm.demandnum),//需增援人数
		};
		console.log(param)
		let paramObj = { obj: JSON.stringify(param) };
		demandpresentationSave(paramObj, function(res) {
			if (res.status == "200") {
				_this.$vux.loading.hide();
				_this.$showBottomToast("保存成功");
				_this.GoBack();
			} else {
				_this.$showBottomToast(res.message);
			}
			console.log(res);
		});
	},
  },
  mounted() {
	let _this=this;
    window.fileSuccessCommit=this.fileSuccessCommit;
	window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
	window.locationSet=this.locationSet;
    window.setContent=this.setContent;
	_this.refreshLocation();
  }
};
</script>
 
<style lang="less" scoped>
.registrationForm {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .registrationForm_content {
    width: 100%;
    height: calc(100% - 46px);
	overflow-y: auto;
	overflow-x: hidden;
	.registrationForm_content_form{
    	width: 100%;
		// padding-left: 20px;
		.fileLists{
			.fileLists_select{
				display: flex;
				align-items: center;
				height: 3.2rem;
				border-top: 1px solid #c7c7c7;
				div{
					width: calc(100% / 3);
					height: 100%;
	    			display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					img{
    					width: 60%;
					}
					span{
						
					}
				}
			}

		}
	}
 	.submit{
		color: #fff;
		background: #139be5;
		padding: 15px 0;
		width: 100%;
		text-align: center;
        font-size: 16px;
        // position: absolute;
        // bottom: 0;
	}    
	

  }
}
</style>
<style>
/* 特殊样式 */
.element_formCommons.needResurce_form .el-form-item{
    padding: .2rem;
}
/* 队伍地址 */
.needResurce_form .teamAddress .el-form-item__content{
	display: flex;
    justify-content: center;
    align-items: center;
}
.needResurce_form .teamAddress .el-form-item__content div:nth-child(1){
	float: left;
	width: calc(100% - 1.4rem - 10px);
	color: #333333;
	font-size: .24rem;
	line-height: 2;
}
.needResurce_form .teamAddress .el-form-item__content div:nth-child(2){
	width: 1.4rem;
    height: .58rem;
    background-color: #409eff;
    border-radius: .06rem;
    display: flex;
    justify-content: center;
    align-items: center;
	float: right;
	font-size: .2rem;
	color: #fff;
}
.needResurce_form .teamAddress .el-form-item__content div:nth-child(2) img{
	width: .17rem;
	height: .21rem;
	margin-right: 5px;
}
/* 备注信息 */
.element_formCommons.needResurce_form .addedCont{
	padding-bottom: .8rem;
}
.needResurce_form .addedCont .el-form-item__content{
	margin-left: 0 !important;
}
.needResurce_form .addedCont .el-textarea{
	height: 170px;
}
.needResurce_form .addedCont .el-textarea .el-textarea__inner{
	border: none;
	height: 100%;
	padding: 0;
}
.needResurce_form .addedCont .el-textarea .el-input__count{
	position: absolute;
    font-size: 12px;
    bottom: -.65rem;
    right: .8rem;
    line-height: 1;
}
/* 特殊样式 */

</style>
